<template>
    <div>
        <!-- 搜索组件 -->
        <search-form :items="formItems" :params="params" :on-submit="onSearch" :btn-loading="loading" />

        <!-- 表格区域 -->
        <div class="table-body">
            <!-- 左上角按钮 -->
            <div class="table-left-top">
                <el-button icon="el-icon-custom-fenpei" type="success" :disabled="checkedIds.length === 0" @click="onAssignTask">{{ $i18n.t('ASSIGN_TASK') }}</el-button>
            </div>

            <!-- 表格 -->
            <el-table border style="width: 100%;" :data="data" v-loading="loading" @selection-change="handleSelectionChange" ref="multipleTable">
                <el-table-column align="center" type="selection" :min-width="50" fixed="left" :selectable="selectable"></el-table-column>
                <el-table-column align="center" prop="order_no" :label="$i18n.t('ORDER_NO')" :min-width="150"></el-table-column>
                <el-table-column align="center" prop="loaned_order_no" :label="$i18n.t('LOANED_ORDER_NO')" :min-width="150"></el-table-column>
                <el-table-column align="center" prop="level" :label="$i18n.t('STAGE')" :min-width="70">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.level === 0" type="danger" size="mini" effect="dark">{{ scope.row.level_text }}</el-tag>
                        <el-tag v-else-if="scope.row.level === 1" type="warning" size="mini" effect="dark">{{ scope.row.level_text }}</el-tag>
                        <el-tag v-else type="primary" size="mini" effect="dark">{{ scope.row.level_text }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="channel_name" :label="$i18n.t('CUSTOMER_CHANNEL')" :min-width="100"></el-table-column>
                <el-table-column align="center" prop="real_name" :label="$i18n.t('REAL_NAME')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="mobile" :label="$i18n.t('PHONE_NUMBER')" :min-width="120"></el-table-column>
                <el-table-column align="center" prop="create_time" :label="$i18n.t('CASE_CREATE_TIME')" :min-width="150"></el-table-column>
                <el-table-column align="center" prop="due_time" :label="$i18n.t('DUE_TIME')" :min-width="150"></el-table-column>
                <el-table-column align="center" prop="follow_result" :label="$i18n.t('FOLLOW_RESULT')" :min-width="170"></el-table-column>
                <el-table-column align="center" prop="follow_staff" :label="$i18n.t('FOLLOWER')" :min-width="100"></el-table-column>
                <el-table-column align="center" prop="follow_num" :label="$i18n.t('FOLLOW_NUM')" :min-width="100"></el-table-column>
                <el-table-column align="center" prop="last_follow_time" :label="$i18n.t('LAST_FOLLOW_TIME')" :min-width="150"></el-table-column>
                <el-table-column align="center" prop="status" :label="$i18n.t('FOLLOW_STATUS')" fixed="right" :min-width="100">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status === 1" size="mini" type="info" effect="dark">{{ scope.row.status_text }}</el-tag>
                        <el-tag v-if="scope.row.status === 2" size="mini" type="" effect="dark">{{ scope.row.status_text }}</el-tag>
                        <el-tag v-if="scope.row.status === 3" size="mini" type="success" effect="dark">{{ scope.row.status_text }}</el-tag>
                        <el-tag v-if="scope.row.status === 4" size="mini" type="danager" effect="dark">{{ scope.row.status_text }}</el-tag>
                        <el-tag v-if="scope.row.status === 5" size="mini" type="warning" effect="dark">{{ scope.row.status_text }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" :label="$i18n.t('ACTION')" fixed="right" :width="150">
                    <template slot-scope="scope">
                        <el-link v-auth="'view'" icon="el-icon-view" @click="onView(scope.row)">{{ $i18n.t('VIEW') }}</el-link>
                        <span v-if="[3, 4, 5].indexOf(scope.row.status) === -1" v-auth="'assign'">
                            <el-divider direction="vertical"></el-divider>
                            <el-link icon="el-icon-custom-fenpei" @click="onAssign(scope.row)">{{ $i18n.t('ASSIGN') }}</el-link>
                        </span>
                    </template>
                </el-table-column>
                <!-- 右侧按钮 -->
            </el-table>

            <!-- 分页 -->
            <div class="table-pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next, ->, sizes"
                    :page-size.sync="page.perPage"
                    :total="page.total"
                    :page-count="page.pageCount"
                    :current-page.sync="page.currentPage"
                    :page-sizes="PAGES_SIZE"
                    @current-change="onCurrentPageChange"
                    @size-change="onPerPageChange"
                >
                </el-pagination>
            </div>
        </div>

        <!-- 分配任务窗口 -->
        <assign-task-dialog
            :dialog-visible.sync="dialogVisible"
            :task-count="checkedIds.length"
            :radio-list="loanedAccountList"
            @on-callback="onCallback"
            :admin-id.sync="adminId"
        >
            <div slot="footer">
                <el-button @click="dialogVisible = false" :loading="btnLoading">{{ $i18n.t('CANCEL') }}</el-button>
                <el-button type="primary" :disabled="adminId === null" @click="onCallback">{{ $i18n.t('CONFIRM') }}</el-button>
            </div>
        </assign-task-dialog>
    </div>
</template>

<script>
    import SearchForm from '@/components/SearchForm'
    import { getLoanedList, assignTask } from '@/api/loaned'
    import { PAGES_SIZE } from '@/config/constants'
    import AssignTaskDialog from '@/components/AssignTaskDialog'

    export default {
        name: 'LoanedList',
        components: { AssignTaskDialog, SearchForm },
        data () {
            return {
                PAGES_SIZE,
                params: {
                    follow_num: [null, null]
                },
                data: [],
                page: {
                    total: 0,
                    currentPage: 1,
                    perPage: PAGES_SIZE[0],
                    pageCount: 1
                },
                loading: false,
                checkedIds: [],
                dialogVisible: false,
                adminId: null,
                btnLoading: false
            }
        },
        created () {
            this.fetch()
        },
        computed: {
            formItems () {
                // 构建搜索表单
                return [
                    { title: this.$i18n.t('ORDER_NO'), type: 'input', key: 'order_no', maxlength: 50 },
                    { title: this.$i18n.t('LOANED_ORDER_NO'), type: 'input', key: 'loaned_order_no', maxlength: 50 },
                    { title: this.$i18n.t('PRODUCT_NAME'), type: 'select', key: 'product_id', options: this.$store.getters.options.ProductList },
                    { title: this.$i18n.t('REAL_NAME'), type: 'input', key: 'real_name', maxlength: 20 },
                    { title: this.$i18n.t('PHONE_NUMBER'), type: 'input', key: 'mobile', maxlength: 20 },
                    { title: this.$i18n.t('CASE_CREATE_TIME'), type: 'date-range', key: 'create_time' },
                    { title: this.$i18n.t('DUE_TIME'), type: 'date-range', key: 'due_time' },
                    { title: this.$i18n.t('FOLLOW_RESULT'), type: 'select', key: 'follow_result', options: this.$store.getters.options.LoanedFollowResultList },
                    { title: this.$i18n.t('FOLLOWER'), type: 'select', key: 'admin_id', options: this.$store.getters.options.LoanedAccountList },
                    { title: this.$i18n.t('STATUS'), type: 'select', key: 'status', options: this.$store.getters.options.LoanedStatusList },
                    { title: this.$i18n.t('FOLLOW_NUM'), type: 'input-number-range', key: 'follow_num' },
                    { title: this.$i18n.t('LOANED_STAGE'), type: 'select', key: 'level', options: this.$store.getters.options.LoanedLevelList }
                ]
            },
            loanedAccountList () {
                return this.$store.getters.options.LoanedAccountList
            }
        },
        methods: {
            // 搜索按钮
            onSearch () {
                this.fetch()
            },
            // 从接口拉取数据
            fetch () {
                this.loading = true
                getLoanedList({
                    ...this.params,
                    page: this.page.currentPage,
                    perPage: this.page.perPage
                }).then((res) => {
                    // eslint-disable-next-line camelcase
                    const { data, last_page, total } = res.result
                    this.data = data
                    this.page.total = total
                    // eslint-disable-next-line camelcase
                    this.page.pageCount = last_page
                }).finally(() => {
                    this.loading = false
                })
            },
            // 页数切换
            onCurrentPageChange (page) {
                this.page.currentPage = page
                this.fetch()
            },
            // 每页显示数量修改
            onPerPageChange (perPage) {
                this.page.perPage = perPage
                this.fetch()
            },
            onView (row) {
                this.$router.push({
                    path: '/loaned/detail',
                    query: {
                        id: row.id,
                        type: 'view'
                    }
                })
            },
            handleSelectionChange (selection) {
                this.checkedIds = selection.map(item => item.id)
            },
            onAssign (row) {
                this.$refs.multipleTable.clearSelection()
                this.$refs.multipleTable.toggleRowSelection(row)
                this.dialogVisible = true
            },
            onAssignTask () {
                if (this.checkedIds.length === 0) {
                    this.$Message.warning(this.$i18n.t('PLEASE_SELECT_TASK'))
                }
                this.dialogVisible = true
            },
            onCallback () {
                this.btnLoading = true
                const { checkedIds, adminId } = this
                assignTask({ checkedIds, adminId }).then(res => {
                    this.$Message.success(this.$i18n.t('HANDLE_SUCCESS'))
                    this.dialogVisible = false
                    this.fetch()
                }).finally(() => {
                    this.btnLoading = false
                })
            },
            selectable (row) {
                return [3, 4, 5].indexOf(row.status) === -1
            }
        }
    }
</script>

<style lang="less" scoped>
</style>
